let ipt = document.querySelector("#email-input")
let sug = document.querySelector("#email-sug-wrapper")
let postfixList = ['163.com', 'gmail.com', '126.com', 'qq.com', '263.net'];

// inputDom的输入监听 = function() {
//     获取用户输入，生成提示框中的提示内容，将提示内容添加到email-sug-wrapper中
//     控制email-sug-wrapper的显示/隐藏状态
// }
ipt.addEventListener("input", function (e) {
    createLis()
    showOrHidden()
})
sug.addEventListener("click", function (e) {
    if (e.target.nodeName == "LI") {
        let value = e.target.innerHTML
        ipt.value = HtmlUtil.htmlDecode(value)
        hidden()
    }
})
ipt.addEventListener("keydown", function (e) {
    // 38 40 13 27
    let li = document.querySelector("li.active")
    if (li) {
        li.className = ""
        if (e.keyCode == 38) {
            if (li.previousElementSibling) {
                li.previousElementSibling.className = "active"
            } else {
                sug.children[sug.children.length - 1].className = "active"
            }
        } else if (e.keyCode == 40) {
            if (li.nextElementSibling) {
                li.nextElementSibling.className = "active"
            } else {
                sug.children[0].className = "active"
            }
        } else if (e.keyCode == 13) {
            let value = li.innerHTML
            ipt.value = HtmlUtil.htmlDecode(value)
            hidden()
        } else if (e.keyCode == 27) {
            ipt.select()
        } else {
            li.className = "active"
            return
        }
    }
})
// 拿到input输入框的输入内容trim后返回   
function getSearch() {
    return ipt.value.trim()
}
// 遍历postfixList,返回生成的提示内容
function getContent() {
    let s = getSearch()
    let output = []
    let end = ""
    let bool = false
    if (s.indexOf("@") != -1) {
        end = s.slice(s.indexOf("@") + 1)
        s = s.slice(0, s.indexOf("@"))
    }
    if (end.trim() != "") {
        for (let j = 0; j < postfixList.length; j++) {
            if (postfixList[j].startsWith(end)) {
                bool = true
            }
        }
    }
    for (let i = 0; i < postfixList.length; i++) {
        if (end.trim() != "") {
            if (bool) {
                if (postfixList[i].startsWith(end)) {
                    output.push(s + "@" + postfixList[i])
                }
            } else {
                output.push(s + "@" + postfixList[i])
            }
        } else {
            output.push(s + "@" + postfixList[i])
        }
    }
    return output
}
// 将提示内容添加到email-sug-wrapper中
function createLis() {
    let output = getContent()
    // for (let i = sug.childNodes.length -1; i >=0; i--) {
    //     sug.childNodes[i].parentNode.removeChild(sug.childNodes[i])
    // }
    sug.innerHTML = ""
    for (let i = 0; i < output.length; i++) {
        const e = output[i];
        let li = document.createElement("li")
        li.innerText = e
        if (i == 0) {
            li.className = "active"
        }
        sug.appendChild(li)
    }
}
// 控制email-sug-wrapper的显示/隐藏状态
function showOrHidden() {
    let inp = getSearch()
    if (inp.length == 0) {
        hidden()
    } else {
        show()
    }
}
// 隐藏提示框
function hidden() {
    sug.style.display = "none"
}
// 显示提示框
function show() {
    sug.style.display = "block"
}

function resetlis() {
    let li = document.querySelector("li.active")
    if (sug.children[0] != li) {
        li.className = ""
        sug.children[0].className = "active"
    }
    return li
}

window.onload = function () {
    ipt.focus()
}